'use strict';
/////////////////////////////////////
// 在我的心上 自由的拖拽
// =====================
// liuyp 2019年3月7日16:02:06
/////////////////////////////////////
function easyDrag(){
    return {
        link : function(scope,element,attr){
            //scope可以接收到的数据 element 当前的元素 attr属性
            //拖拽的三大事件mousedown,mousemove,mouseup.使用jq绑定事件的方法进行绑定
            element.on('mousedown',function(ev){
                //通过event获取到当前对象
                var This = $(this);
                //获取到鼠标离当前元素上边框左边框的距离
                var disX = ev.clientX - $(this).position().left;
                var disY = ev.clientY - $(this).position().top;
                //因为在拖拽的过程中不变的是鼠标距离元素边框的距离 通过不变和已知求变量
                $(document).on('mousemove',function(ev){
                    //将所改变的值通过样式设置给当前元素
                    This.css({
                        left:ev.clientX - disX,
                        top:ev.clientY - disY,
                    });
                });
                $(document).on('mouseup',function(){
                    //鼠标松开时关闭所有事件
                    $(document).off();
                })
            })
        },
        restrict:'A', //ECMA E元素  C类名 M注释 A属性
    };
}
exports = module.exports = easyDrag;